<style lang='scss' scoped>
</style>
<template>
  <div>
    <Box>
    <search-container>
    <el-form :inline="true" label-width="110px" :model="searchForm" class="query-form mb20">
      <el-form-item label="路径" prop="path">
        <el-input v-model="searchForm.path" placeholder="请输入路径" auto-complete="off"></el-input>
      </el-form-item>

      <el-form-item label="操作员">
        <el-select filterable class="w100per" placeholder="请选择" v-model="searchForm.operator">
          <el-option v-for="item in operators" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围">
        <el-date-picker
          v-model="searchForm.range"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <div class="mb20 tc">
        <el-button type="primary" size="small" icon="el-icon-search" @click="onSearch()">查询</el-button>
        <el-button type="warning" size="small" icon="el-icon-refresh" @click="searchForm={}">重置</el-button>
      </div>
    </el-form>
    </search-container>
    <div class="data-list-container">
      <el-table
        v-loading="regionLoading"
        element-loading-spinner="el-icon-loading"
        :data="zkDataHistoryList"
        border
        style="width:100%"
        class="m20px"
      >
        <el-table-column sortable prop="gmtCreated" label="历史保存时间" width="140">
          <template slot-scope="scope">{{DateFormat(scope.row.gmtCreated)}}</template>
        </el-table-column>
        <el-table-column prop="operator" label="操作员" width="120"></el-table-column>
        <el-table-column prop="operateAction" label="操作动作" width="120"></el-table-column>
        <el-table-column prop="path" label="全路径"></el-table-column>
        <el-table-column prop="content" label="历史版本信息">
          <template slot-scope="scope">{{ scope.row.content || ' '}}</template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="onOpenRestoreDialog('edit',scope.row)">详情</el-button>
            <el-button size="small" type="text" @click="onOpenRestoreDialog('config',scope.row)">配置应答</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="this.pager.total > 0 "
        :page-sizes="pagination.pageSizes"
        :page-size="pager.pageSize"
        :layout="pagination.layout"
        :total="pager.total"
        :current-page="pager.pageIndex"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :title=" dialogType == 'edit' ? '历史版本' : '配置应答' "
      @close="historyEditDialogVisible = false;"
      :visible.sync="historyEditDialogVisible"
      class="view-dialog"
    >
      <el-form v-if="dialogType == 'edit' " class="mt20" :model="modifyHistoryForm" ref="addEditForm" label-width="100px">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="产品编号:" prop="id">
              <el-input placeholder="请输入" readonly v-model="modifyHistoryForm.id"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="操作员:" prop="operator">
              <el-input placeholder="请输入" readonly v-model="modifyHistoryForm.operator"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="操作动作:" prop="operateAction">
              <el-input placeholder="请输入" readonly v-model="modifyHistoryForm.operateAction"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="历史保存时间:" prop="gmtCreated">
              <el-input placeholder="请输入" readonly v-model="modifyHistoryForm.gmtCreated"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="content:" prop="content">
              <MonacoEditor :jsonData.sync="modifyHistoryForm.content" ref="jsonData1"></MonacoEditor>

              <!-- <el-input type="textarea" readonly :autosize="{minRows:20}" placeholder="请输入" v-model="modifyHistoryForm.content"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div v-else-if="dialogType == 'config' ">
        <el-table
          v-loading="regionLoading"
          element-loading-spinner="el-icon-loading"
          :data="configList"
          border
          style="width:100%"
          class="m20px"
        >
          <el-table-column prop="applicationName" label="应用名"></el-table-column>
          <el-table-column prop="ip" label="ip"></el-table-column>
          <el-table-column label="状态" width="60">
            <template slot-scope="scope">
              <div class="tc">
                <el-button type="text" icon="el-icon-success"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row>
        <el-col :span="24" class="tc mt20">
          <el-button v-if="dialogType=='edit'" icon="el-icon-edit" type="success" @click="restoreHistoryRecordDialog()">还原该版本</el-button>
          <el-button type="primary" @click="historyEditDialogVisible = false;">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    </Box>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
import SearchContainer from "src/components/common/SearchContainer";
import SELECT_DATA, { getConfigItem } from "src/utils/selectData";
import storage from 'src/utils/storage';
import fetch from "src/utils/fetch";
import notification from "src/utils/notification";
import { DateFormat, sendReq } from 'src/utils/tools';
import MonacoEditor from "src/components/common/MonacoEditor.vue"

export default {
  data() {

    const inputWarning = (msg) => {

      return [
        {
          required: true,
          message: msg,
          trigger: "blur,change"
        }
      ];
    };

    const pagePermissionsMenu = storage.get('pagePermissionsMenu') ? storage.get('pagePermissionsMenu') : {};
    return {
      searchForm: {
        range: [],
      },
      operators: [],
      zkDataHistoryList: [],
      pager: {
        total: 0,
        pageIndex: 1,
        pageSize: 20,
      },
      srcRow: {},
      modifyHistoryForm: {},
      historyEditDialogVisible: false,
      dialogType: '',
      configList: [],
    };
  },
  components: {
    SearchContainer,MonacoEditor
  },
  computed: {
    ...mapGetters(["pagination", "regionLoading",]),
  },
  watch: {

  },
  created() {

    this.onSearch();
    this.getOperators();


  },
  methods: {
    ...mapActions(["doZooHandlerName", 'queryAssetNode']),
    DateFormat,
    getOperators() {
      fetch({
        url: '/zkdata/operators',
        type: "post",
        data: {},
        showRegionLoading: true,
        success: (data) => {
          if (!data) return;
          this.operators = data.operators || [];
        },
      });
    },

    onOpenRestoreDialog(type, row) {

      this.dialogType = type;
      if (type == 'edit') {
        this.srcRow = JSON.parse(JSON.stringify(row));
        let rowObj = JSON.parse(JSON.stringify(row));

        rowObj.content = JSON.stringify(JSON.parse(rowObj.content), '{}', 4);
        rowObj.gmtCreated = this.DateFormat(rowObj.gmtCreated);
        this.modifyHistoryForm = rowObj;
        this.historyEditDialogVisible = true;
      } else if (type == 'config') {
        sendReq({
          url: '/zkdata/queryZkRespond',
          params: { serialNo: row.serialNo },
          cb: (data) => {
            this.configList = data || [];
            this.historyEditDialogVisible = true;
          }
        })
      }


    },
    restoreHistoryRecordDialog(row) {
      let that = this;

      this.$confirm("确定还原改版本吗?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      }).then(() => {

        fetch({
          url: '/config/updateNode',
          type: "post",
          data: { path: this.srcRow.path, content: JSON.parse(this.srcRow.content) },
          showRegionLoading: true,
          success: (data) => {

            notification.success('操作成功');
            let row = { ...this.srcRow, operateAction: '还原' };

            // 添加一条历史操作记录
            // this.addHistoryRouter(row, (row) => {  });
            // 更新历史查询列表
            let params = {
              path: '',
              operator: '',
              startTime: '',
              endTime: '',
              pageNum: 1,
              pageSize: 20,
            };
            this.onSearch(params);


            this.historyEditDialogVisible = false;
          },
        });


      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        });
      });
    },
    addHistoryRouter(row, cb) {
      let params = {
        type: 2, //  1、add  2、update  3、del
        path: row.path ? row.path : row.key,
        content: row.content ? row.content : '',
        operateAction: row.operateAction,
      };

      fetch({
        url: '/zkdata/history',
        type: "post",
        data: params,
        showRegionLoading: true,
        success: (data) => {
          cb && cb(row);

        },
      });

    },
    onSearch(queryParams) {

      let params = {
        path: this.searchForm.path || '',
        operator: this.searchForm.operator || '',
        startTime: this.searchForm.range ? this.searchForm.range[0] : '',
        endTime: this.searchForm.range ? this.searchForm.range[1] : '',
        pageNum: this.pager.pageIndex,
        pageSize: this.pager.pageSize,
      }

      fetch({
        url: '/zkdata/histories',
        type: "post",
        data: queryParams ? queryParams : params,
        showRegionLoading: true,
        success: (data) => {
          if (!data) return;
          this.zkDataHistoryList = data.data || [];
          this.pager.total = data.totalRecord;
        },
      });
    },
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onSearch();
    },
    handleCurrentChange(pageIndex) {
      this.pager.pageIndex = pageIndex;
      this.onSearch();
    },
  }
};
</script>
